<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap core CSS -->
    <link rel="stylesheet" href="./css/bootstrap.min.css">

    <style>
        .bd-placeholder-img {
            font-size: 1.125rem;
            text-anchor: middle;
        }

        @media (min-width: 768px) {
            .bd-placeholder-img-lg {
                font-size: 3.5rem;
            }
        }
    </style>

    <!-- Custom styles for this template -->
    <link href="./css/login.css" rel="stylesheet">

    <!-- jQuery -->
    <script src="./js/jquery-3.4.1.min.js"></script>
    <script src="./js/popper.min.js"></script>
    <script src="./js/bootstrap.min.js"></script>

    <title>登录</title>
</head>
<body class="text-center">
<form class="form-login">
    <h1 class="h3 mb-4 font-weight-normal">请登录</h1>
    <input id="inputUserName" class="form-control mb-2" placeholder="用户名" required autofocus>
    <input type="password" id="inputUserPassword" class="form-control" placeholder="密码" required>

    <div class="container mb-2">
        <div class="row">
            <input id="inputCode" class="col-7 form-control" placeholder="验证码" required>
            <img id="identcode" class="col-5" style="cursor: pointer;" src="identcode">
            <!--            <a id="refesh" class="col"   href="">看不清？换一张！   </a>-->
        </div>
    </div>

    <button type="button" class="btn btn-lg btn-primary btn-block" onclick="login()">登录</button>

    <!-- trigger modal -->
    <p class="text-muted mt-2 mb-2">
        还没有账号？点击
        <a href="" data-toggle="modal" data-target="#exampleModal">这里</a>
        注册一个
    </p>

    <p class="mt-5 mb-3 text-muted">&copy; 不知道叫什么团队 2020-2020</p>
</form>

<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
     aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel">注册一个账号</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <form class="form-login">
                    <input id="regUserName" class="form-control mb-2" placeholder="用户名" required autofocus>
                    <input type="password" id="regUserPassword" class="form-control" placeholder="密码" required>

                    <div class="container mb-2">
                        <div class="row">
                            <input id="regCode" class="col-7 form-control" placeholder="验证码" required>
                            <img id="identcode1" class="col-5" style="cursor: pointer;" src="identcode">
                            <!--            <a id="refesh" class="col"   href="">看不清？换一张！   </a>-->
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
                <button type="button" class="btn btn-primary" onclick="register()">确定</button>
            </div>
        </div>
    </div>
</div>

<script>
    window.onload = function () {
        //点击图片时
        var img = document.getElementById("identcode");
        img.onclick = function () {
            refesh();
        }

        var img1 = document.getElementById("identcode1");
        img1.onclick = function () {
            refesh();
        }

        // //点击连接时
        // var a = document.getElementById("refesh");
        // a.onclick = function () {
        //     refesh();
        //     //返回false防止a标签默认href行为
        //     return false;
        // }

        function refesh() {
            /**
             * 由于路径相同时浏览器会自动调用缓存中的图片
             * 所以在连接后加时间戳解决此问题
             */
            var date = new Date().getTime();
            img.src = "identcode?" + date;
            img1.src = img.src;
        }
    }
</script>

<script>
    function login() {
        // 先验证账号密码
        $.ajax({
            type: "GET",
            url: '/login',
            data: {
                userName: document.getElementById("inputUserName").value,
                userPassword: document.getElementById("inputUserPassword").value
            },
            success: function (res) {
                if (res) {
                    verify("inputCode");
                } else {
                    alert("用户名或密码错误，请重新登录！");
                }
            },
            cache: false
        });
    }

    function register() {
        if (document.getElementById("regUserName").value == null
            || document.getElementById("regUserPassword").value == null
            || document.getElementById("regUserName").value == ""
            || document.getElementById("regUserPassword").value == "")
            alert("请输入完整的信息！");
        else {
            $.ajax({
                type: "GET",
                url: '/register',
                data: {
                    userName: document.getElementById("regUserName").value,
                    userPassword: document.getElementById("regUserPassword").value
                },
                success: function (res) {
                    if (res) {
                        verify("regCode");
                    } else {
                        alert("用户名已存在！");
                    }
                },
                cache: false
            });
        }
    }

    function verify(code) {
        $.ajax({
            type: "GET",
            url: '/verifycode',
            data: {
                Code: document.getElementById(code).value
            },
            success: function (res) {
                if (res == "yes") {
                    window.location.href = "./pages/heatmap.html";
                } else {
                    alert("验证码错误，请重新输入！");
                }
            },
            cache: false
        });
    }
</script>
</body>
</html>
